<template>
  <div class="echart" ref="echart"></div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null
    }
  },
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    option: {
      handler (value) {
        if (value) {
          this.myChart = this.$echarts.init(this.$refs.echart)
          this.myChart.setOption(value);
          this.myChart.on('click', this.click);
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // setOption(options) {
    //   this.myChart.setOption(options)
    // },
    click (params) {
      this.$emit('click', params)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.echart)
    this.myChart.setOption(this.dataOption);
  }
}
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  min-height: 300px;
}
</style>
